<script setup>
import { ref, onMounted, computed } from "vue";
import { useRoute, useRouter } from "vue-router";

const dataList = ref([]);
const breadcrumbData = ref([]);
const route = useRoute();
const router = useRouter();
const pathRegExp = /^\/[a-zA-Z0-9]+\/:[a-zA-Z0-9]+/;

// console.log();

const breadcrumb = computed(() => {
  console.log(route);

  if (route.path == "/") {
    breadcrumbData.value = [];
  } else {
    route.matched.forEach((item) => {
      if (pathRegExp.test(item.path)) {
        item.meta.title = route.params.name;
      }
      breadcrumbData.value.push(item.meta)

    });
  }

  // let matachedArr = route.matched.filter((item) => {
  //   if (pathRegExp.test(item.path)) {
  //     item.meta.title = route.params.name;
  //   }
  //   return item.meta.showInbreadcrumb;
  // });

  // matachedArr = [{ path: "/", meta: { title: "首页" } }].concat(matachedArr);

  return breadcrumbData;
});

onMounted(() => {});
</script>

<template>
  <div class="breadcrumb" v-if="0 > 1">
    <div class="breadcrumb-content-center">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item
          v-for="(item, index) in breadcrumb"
          :key="index"
          :to="{ path: item.path }"
        >
          {{ item.meta.title }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
  </div>
</template>

<style lang="scss">
.breadcrumb {
  padding: 10px 0;

  .breadcrumb-content-center {
    width: 80%;
    margin: 0 auto;
  }

  .el-breadcrumb__inner a,
  .el-breadcrumb__inner.is-link {
    font-weight: 400;
    color: #999;
  }

  .el-breadcrumb__inner a,
  .el-breadcrumb__inner.is-link:hover {
    color: #1abc9c;
  }

  .el-breadcrumb__item:last-child .el-breadcrumb__inner,
  .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
  .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
  .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
    font-weight: 700;
    color: #666;
  }
}
</style>
